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ABSTRACT 



This paper describes how the authors use a mixture of World 
Wide Web (WWW) -based functionalities and new didactics to teach educational 
technology students at the University of Twente (Netherlands) about the 
design of WWW-based learning environments. Topics discussed include: (1) the 

content of courses about the design of educational WWW environments; (2) 
strategies for teaching about design guidelines; (3) areas of concern related 
to teaching about design guidelines; and (4) a preliminary list of guidelines 
for teaching about design of WWW-based learning materials. Four figures 
include: the design guidelines used as content for a course in which 
first-year educational technology students learn about the design of 
educational WWW sites; an example of study materials relating to a particular 
design guideline; a typical online exercise; and a part of the results of 
self-evaluation in which guidelines are used. (DLS) 
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Abstract: Learning to be a designer of educational media now involves a new set 
of skills and insights: in addition to traditional topics such as designing video products and 
designing computer-based tutorials, students must also learn about designing WWW-based 
sites for learning-related purposes. What and how do we teach them? What are guidelines 
for the design of WWW-based sites for learning-related purposes? And, what are 
guidelines for teaching about such guidelines? In this paper, we describe how we use a 
mixture of WWW-based functionalities and new didactics to teach educational-technology 
students about the design of WWW-based learning environments. We identify the set of 
design guidelines that we teach, and show some of the ways in which we have designed our 
own WWW-based course to improve the way in which we teach our students about these 
design guidelines. We conclude on a meta-level: What are design guidelines for teaching 
about design guidelines for WWW-based learning environments? 



1. What is our Content in Courses about the Design of Educational WWW 
Environments? 
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Our first task is one of content: what do we want to teach our students about the design of WWW- 
based learning environments? Designing and producing educationally effective WWW environments involves 
the integration of technical considerations and skills, user-interface design, instructional design, and 
management and organisational aspects. Thus many perspectives have to be addressed in courses in which 
students are being trained to become accomplished designers of WWW environments. One of the major 
strengths of WWW-based environments is their elasticity: an environment can be designed as a 
communication center, an information center, a collaboration center, a dissemination and publication center, 
and a presentation center, and combinations of all of these. A site can emphasize its hyperlinking 
capabilities, or it can emphasize its communication and information-organization capabilities. Thus trying to 
teach students about good design of WWW-based environments is challenging because the subject matter is 
so broad. We have chosen to focus on a set of design guidelines that have applicability across this broad 
variety of application forms for WWW-based learning environments. By design guidelines, we mean a 
‘statement of good practice’, expressed as concisely as possible, ideally, so that it can be remembered. ‘Keep 
it simple’ is an example of a simple-sounding but complex-to-apply design guideline. 

Many different authors are now publishing lists of design guidelines. For example, [Madhumita & 
Kumar 1995] have written about design guidelines for instructional design, [Park & Hannafin 1993] have 
published guidelines about interactive multimedia, and [Wilson & Jonassen 1989] have discussed guidelines 
for hypertext and instructional design. A small number are now beginning to focus on guidelines for WWW- 
based courses (see for example, [Eekma & Collis 1996]. Sometimes sets of design guidelines are built upon 
design guidelines for earlier media, such as for computer-based learning products or educational multimedia. 
Typically design guidelines can be grouped in clusters relating to presentation aspects, to content aspects, and 
to instructional-approach aspects, as well as aspects specific to the sorts of media involved (i.e., for video, 
audio, printed materials, hyperlinked multimedia databases, WWW sites, etc.). 

Based on a number of years of investigation, we have developed a set of 21 design guidelines for 
educational WWW sites appropriate for use with our first-year students. Ten of this are shown in [Fig. 1], 
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organized according to level of abstraction. These guidelines are continually evolving; we fully acknowledge 
their incompleteness and occasional overlap. The complete set can be seen at the URL in [Fig. 1]. 



Netscape: Rll Guidelines at Once 



Location * <^jhttp:/ /v w .to . utvente . nl /ism /ism 1 -97/ wvproj /study ctr/ AH In0ne.htm 



Topic 


Simple 


Intermediate 


Advanced 


General 


- 


- 


6. The WW is a 
learning environment 
that can be made flexible. 
Use this fact. 

9. Keep it simple 

1 0. Be consistent 


Content 


4. The reader should 
be able to get in 
contact with persons. 


5. Design your web page 
not only for one way 
transmission of 
information. The www is 
also a good tool for 
communication. So, try to 
incorporate some means of 
communication such as a 
discussion room. 


1 . The content of a site 
should be appropriate for 
its intended users. 
“Appropriate" relates to 
not only the material 
itself, but also the way in 
which it is expressed. 


when appropriate, 
directly through the 
WWW page. 


Navigation 


13. Place 

navigational buttons 


2. Make sure the users have 
a #ood overview of the 
structure of a site, so that 


16. The user 

automatically generates a 
mental model of a Web 


on the same location 
on the screen 
throughout a 
program, so that the 
user can always find 
them in the same 
place. 

18. Do not confuse 
the user by putting 
more than 7 
(navigational) icons 
on a page. The 


site. The user 
should be helped to make 
this model a structured 
one, by adding 
functional 

and graphic continuity 
between the various 
components and 
subsections of the Web 
site. 


they can easily find their 
way to what they want. 
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Figure 1: Design guidelines used as content for a course in which first-year educational-technology students 
learn about the design of educational WWW sites [Collis, Verhagen, & Gervedink Nijhuis, 1996, 1997] 

But although it has not been too difficult to find lists of criteria for the design of WWW 
environments, and to translate those into design guidelines for educational WWW sites, in our own ongoing 
search of references we have not found any design guidelines for the meta-level: design guidelines for 
teaching about design guidelines... How do we teach about design guidelines for WWW environments to first- 
year students? In this report we will show our approach. 
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Teaching About Design Guidelines for Educational WWW Environments 



The course "ISM-1" is a required subject for first-year students in the Faculty of Educational Science 
and Technology at the University of Twente ("ISM" are the initials of the department in this faculty that 
specializes in educational media). Approximately 70 students are enrolled, and the course lasts the entire 
academic year, divided over three trimesters. During each trimester, the students work in groups to design and 
produce different types of educational media products, for different purposes. These products include 
desktop-published print materials, educational videos, and WWW environments that include JavaScript-based 
interactivity and multimedia resources made by the students themselves (for example, Quicktime movies 
made by the students and integrated into educationally oriented WWW sites, where questions and answers 
about the message of the movies are presented via different JavaScript constructions). WWW environments 
are part of each of the product sets during each trimester, so the students develop in their skill and experience 
in designing and producing such environments over the year. The course is organized about five traditional 
lectures per trimester, and these group projects. (For a full description, see [Collis, Verhagen, Gervedink 
Nijhuis, & Meeuwsen, 1996]. The entire course is supported by an integrated and complex WWW 
environment, about which much has been written (see for example, [Collis, Andemach, & Van Diepen, 
1997]. The course can be visited at http://www.to.utwente.nl/ism/isml-97/home.htm. 

Our main strategy for teaching about the design guidelines is to use them as the way to integrate the 
theory and the practical aspects of the course. The design guidelines are developed week by week, in our 
study materials, used to shape the way students look at and evaluate WWW sites made by others, and used as 
the criteria for the students’ own design work. In addition, and perhaps most powerful in terms of student 
motivation, the design guidelines developed in the theory part of the course are the basis for the mark given to 
the students when evaluating the WWW sites they produce themselves in the projects. [Fig. 2] shows a typical 
study page for a design guideline, including a link to an external site that illustrates the guideline in practice. 
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Design Guidelines, extra explanation 



(Last update, 17/9/97) 



Aeep ixpjy oriented 

The 'back' and forward buttons of the standard web browser take the user back and 
forward to the places where they have already been. This may not be enough to keep the 
user oriented. Therefore it is often helpful to include buttons to go to the next page that the 
designer intended, or to go back to the home page of a site (such as the house below that 
takes you back to the homepage of ISM-1). 

In ‘Windows to the Universe', you can follow a guided tour through the site, the button on 
top of the page helps the user to keep oriented. 
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Figure 2: An example of study material relating to a particular design guideline. 
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[Fig. 3] Shows one of the on-line exercises that students do after each week's study about design 
guidelines. 



Location : Ji 



http : / /utto2 1 2 .to ut vonto .nl A/eek40 / q40 ,htrn 



Questions to submit 



To answer the questions, type your name, your email address, a subject, and your message text. Once 
complete, press the “Submit" button. If you want to start over, press the “Clear" button to erase all the 
fields. You may answer in dutch or in english, whatever suits you best. 






Your full name: [ 
Your group number: [ 
Your e-mail address [ 



Question 1 . Please name one of the guidelines of this week and describe how you want to use it for your 
own WWW site. 



Guideline: 




Figure 3: A typical on line exercise. 

Parallel to this, the students apply the design guidelines in their own work. They do this by using 
them as the criteria by which they evaluate their own group’s site, the criteria for peer review of the sites of 
the other groups, as criteria for the on-going and final evaluations of their sites by the course team, and as the 
basis of the final presentation and reflection that they must do about their work. [Fig. 4] shows a part of the 
results of self-evaluation. 




Our site is a good example of: 



10: Place navigational buttons on the same location on the screen throughout a program, 
so that the user can always find them in the same place. 

Because: 

De knoppen staan steeds op een rij onderaan de pagina en zijn dus altijd op 
dezelfde plek terug te vinden. 



1 3: The user automatically generates a mental model of the web site 

Because: 

Door de pagina’ s allemaal dezelfde kleur als de knoppen te geven weet de 
gebruiker waar hij/zij zit. De pagina' s zijn ook op soortgelijke wijze vorm 
gegeven wat het geheel ook consistent m akt, zodat er gemakkelijker een mentaal 
beeld te vormen is. 




Figure 4: A part of the results of self-evaluation in which guidelines are used. 



3. Issues Relating to Teaching about Design Guidelines 

Although we have made significant progress in developing our instructional strategies for teaching 
first-year students about design guidelines for educational WWW environments, we are still concerned about 
a number of aspects and are carrying out research to investigate further how to design WWW environments to 
better support good teaching and learning about design guidelines for WWW-based learning resources 
[Winnips 1997]. Key among these concerns are: 

1. How can our content in terms of the choice and wording of the design guidelines be improved? 

2. How can we measure the students’ growth in understanding about these design guidelines? (The 
students have indicated that the guidelines are so clear and sensible, that they can come to ’’know 
them” without much effort. How do we indicate levels of wisdom and insight in terms of applying 
a guideline such as "Keep it simple?” to the design of a WWW environment? 

3. How can we measure the impact of our own teaching strategies on this growth? In particular, how 
can we design and use our course WWW site as a powerful learning environment relating to these 
design guidelines? 

4. How can we most effectively scaffold [Jonassen 1996] the students in the application of the design 
guidelines? How can scaffolding procedures be designed as part of our WWW-based course 
environment? How can we measure the impact of the different forms of scaffolding we are trying 
to use in our course? 

5. Looking at the problem from the course designers' perspective: how do we design a WWW-based 
resource to help students learn design guidelines for WWW-based resources? 

6. Finally, from an instructor’s perspective, what are design guidelines for teaching about design 
guidelines with the support of WWW environments? 

We conclude this paper with a brief reflection on the last question. 



4. A Preliminary List of Guidelines for Teaching about Guidelines for WWW- 
Based Learning Materials 

Based on our experiences with three years' of the ISM-1 course and the use of a WWW-based course 
environment as well as design guidelines in those three cycles, we offer the following provisional set of 
design guidelines for others who wish to teach their students about design guidelines for WWW-based 
learning resources: 

• Provide many different ways to apply the guidelines, ranging from using them to categorise 
external sites, to criteria for evaluating the students' own work. 

• Repeatedly give opportunities for articulating the design guidelines, using them to explain 
one’s opinion about a WWW site [Vermunt 1992], ranging from memorising to creating one's 
own guideline (reflecting). 

• Scaffold the explanation and examples, providing detailed comments to begin and also less- 
detailed points; scaffold the pedagogy, from explicit exercises to implicit appreciation. 

• Find a measure of student progress, and collect data to show improvement. 
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